<template>
	<div>
		<el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
			<el-step title="1. 确认回报内容"></el-step>
			<el-step title="2. 生成订单"></el-step>
			<el-step title="3. 完成"></el-step>
		</el-steps>

		<div style="width: 1100px; margin: 30px auto; background-color: #ebeef5">
			<el-alert class="el-icon-warning" title="请在下单后15分钟内付款，否则您的订单会被自动关闭。" type="error">
			</el-alert>
			<div>
				<div style="margin: 20px 0"></div>
				<el-row>
					<el-col :span="1" style="background-color: red; width: 5px">
						<div class="grid-content bg-purple">&nbsp;</div>
					</el-col>
					<el-col :span="49">
						<div class="grid-content bg-purple-light">
							<font size="4px" color="red">&nbsp;&nbsp;收货地址</font>
						</div>
					</el-col>
				</el-row>
			</div>
			<!-- 收货地址板块 -->
			<div style="margin: 20px 0"></div>
			<div style="width: 1000px; margin: 30px auto">
				<template>
					<el-dropdown split-button type="primary">
						<span class="el-dropdown-link">
							选择地址<i class="el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="aa in address" @click.native="toshowadd(aa)">
								{{ aa.username }}&nbsp;&nbsp;{{ aa.phone }}&nbsp;&nbsp;{{
                  aa.addname
                }}&nbsp;&nbsp;{{ aa.detaties }}
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

				<el-button type="primary" @click="addDialogVisible = true">添加地址</el-button>

				<el-dialog title="添加地址信息" :visible.sync="addDialogVisible" width="50%" :before-close="reset">
					<el-form :model="addAddress" :rules="addRules" ref="addAddressRef" label-width="80px">
						<el-form-item label="电话" prop="phone">
							<el-input v-model="addAddress.phone"></el-input>
						</el-form-item>

						<el-card class="box-card">
							<!-- 级联选择器 -->
							请选择地址（省市区（县））：<el-cascader v-model="addAddress.addname" :options="citys">
							</el-cascader><br />

							<el-form-item label="省市区" prop="addname">
								<el-input v-model="addAddress.addname" readonly></el-input>
							</el-form-item>
						</el-card>

						<el-form-item label="详细地址" prop="detaties">
							<el-input v-model="addAddress.detaties"></el-input>
						</el-form-item>
					</el-form>
					<!-- 取消和确定 -->
					<span slot="footer" class="dialog-footer">
						<el-button @click="reset">取 消</el-button>
						<el-button type="primary" @click="addAddressFrom">确 定</el-button>
					</span>
				</el-dialog>

				<div style="width: 1000px; height: 250px; background-color: #ebeef5">
					<div style="margin: 20px 0"></div>
					<font size="4px">收货人(*)&nbsp;&nbsp;
						<el-input v-model="aaname" style="width: 200px" readonly placeholder="姓名XXX"></el-input>
					</font><br />

					<div style="margin: 20px 0"></div>
					<font size="4px">手机号(*)&nbsp;&nbsp;
						<el-input v-model="aaphone" style="width: 200px" readonly placeholder="手机号XXX"></el-input>
					</font><br />

					<div style="margin: 20px 0"></div>
					<font size="4px">&nbsp;地址(*)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<el-input v-model="aalevel" style="width: 500px" readonly placeholder="地址XXX"></el-input>
					</font>

					<div style="margin: 20px 0"></div>
					<font size="4px">&nbsp;详细地址(*)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<el-input v-model="aadetaties" style="width: 500px" readonly placeholder="详细地址XXX"></el-input>
					</font>

					<div style="margin: 20px 0"></div>
					
				</div>
			</div>
			<div>
				<div style="margin: 20px 0"></div>
				<el-row>
					<el-col :span="1" style="background-color: red; width: 5px">
						<div class="grid-content bg-purple">&nbsp;</div>
					</el-col>
					<el-col :span="49">
						<div class="grid-content bg-purple-light">
							<font size="4px" color="red">&nbsp;&nbsp;项目信息</font>
							<font size="2px" color="blue">&nbsp;&nbsp;修改数量</font>
							<div style="margin: 20px 0"></div>
						</div>
					</el-col><br />
					<!-- 项目信息板块  -->

					<div>
						<table class="table2" style="text-align: center; border: #222d32">
							<thead>
								<td class="td2">项目名称</td>
								<td class="td2">发起人</td>
								<td class="td2">回报内容</td>
								<td class="td2">支持数量</td>
								<td class="td2">回报数量</td>
								<td class="td2">支持单价</td>
								<td class="td2">配送费用</td>
							</thead>
							<tbody>
								<tr>
									<td class="td2">{{ ri.it.iname }}</td>
									<td class="td2">{{ ri.itmans.mshow }}</td>
									<td class="td2">{{ ri.rw.rewardcontext }}</td>
									<td class="td2">{{ ri.paynum }}</td>
									<td class="td2">{{ ri.rw.rewardnum }}</td>
									<td class="td2">{{ ri.rw.paymoney }}</td>
									<td class="td2">{{ ri.rw.yf }}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</el-row>
			</div>
			<!-- 账单板块 -->
			<div>
				<div style="margin: 20px 0"></div>
				<el-col :span="1" style="background-color: red; width: 5px">
					<div class="grid-content bg-purple">&nbsp;</div>
				</el-col>
				<el-col :span="49">
					<div class="grid-content bg-purple-light">
						<font size="4px" color="red">&nbsp;&nbsp;账单</font>
					</div>
				</el-col>

				<div style="margin: 20px 0"></div>
			</div>
			<br />
			<!-- 账单内容 -->
			<div style="
          text-align: right;
          background-color: #fcf8e3;
          border: #ffc287 solid;
        ">
				<div style="margin: 20px 0"></div>
				<font size="2px">支持金额：</font>
				<font size="2px" color="red">￥{{ ri.rw.paymoney }}</font>

				<div style="margin: 15px 0"></div>
				<font size="2px">配送费用：</font>
				<font size="2px" color="red">￥{{ ri.rw.yf }}</font>

				<div style="margin: 30px 0"></div>
				<font size="5px">支付总金额：</font>
				<font size="5px" color="red">￥{{ sum }}</font>

				<div style="margin: 30px 0"></div>
				<font size="2px">您需要先<a href="#">设置配送信息</a>，在提交订单</font><br />
				<font size="2px">请在下单后15分钟内付款，否则您的订单会被自动关闭。</font>

				<div style="margin: 30px 0"></div>
				<template>
					<el-button type="warning" class="el-icon-goods" @click="paymomey">立即付款
					</el-button>
				</template>
				<div style="margin: 30px 0"></div>
				<template>
					<el-checkbox v-model="checked">我已了解风险和规则</el-checkbox>
				</template>
			</div>
			<div style="margin: 30px 0"></div>
			<div id="xxx1"></div>
		</div>
	</div>
</template>

<script>
	import qs from "qs";
	import citys from "../assets/citydata.js";
	export default {
		data() {
			//自定义手机号的验证规则
			var checkMobile = (rule, value, callback) => {
				if (!value) {
					return callback(new Error("手机号不能为空"));
				}
				//判断是否符合手机号的正则表达式规则
				var reg = /^[1]{1}[0-9]{10}$/;
				if (!reg.test(value)) {
					//手机号格式不满足
					return callback(new Error("手机号格式不合法"));
				}
				return callback(); //条件满足
			};
			return {
				user: '',
				paynum: 1,
				citys: citys,
				active: 1,
				address: [{
					addressid: "",
					userid: "",
					phone: "",
					addname: "",
					detaties: "",
					username: "",
				}, ],
				tableData: [{}],
				checked: false,
				aaname: "",
				aaphone: "",
				aaadid: "",
				aalevel: "",
				aadetaties: "",

				addDialogVisible: false,
				addAddress: {
					userid: "",
					phone: "",
					addname: "",
					detaties: "",
				},
				xx: {
					orderid: "",
					orderuuid: "",
					userid: "",
					iid: "",
					allmoney: "",
					payonemoney: "",
					paynum: "",
					rewardnum: "",
					aid: "",
					paytime: "",
					isdel: "",
					items: "",
					status: "",
				},
				ri: {
					paynum: "",
					itmans: "",
					rw: "",
					it: "",
				},
				sum: 0,
				payGateWay: "",
				addRules: {
					phone: [
						//自定义验证规则
						{
							validator: checkMobile,
							trigger: "blur",
						},
					],
				},
			};
		},
		methods: {
			async seleaddress() {
				let userid = window.sessionStorage.getItem("userid");
				var res = await this.$http.post("selectAlladdress?userid=" + userid);
				this.address = res.data.data;

				var rw = JSON.parse(this.$route.query.ra);
				this.ri.paynum = rw.paynum;
				this.ri.itmans = rw.itmans;
				this.ri.it = rw.it;
				this.ri.rw = rw.rw;

				this.sum = this.ri.paynum * this.ri.rw.paymoney + this.ri.rw.yf;
				//console.log(this.ri);
			},
			toshowadd(aa) {
				//console.log(aa)
				this.aaname = aa.username;
				this.aaphone = aa.phone;
				this.aaadid = aa.addressid;
				this.aalevel = aa.addname;
				this.aadetaties = aa.detaties;
			},
			reset() {
				this.addDialogVisible = false; //关闭对话框sel
				this.$refs.addAddressRef.resetFields();
			},

			addAddressFrom() {
				this.$refs.addAddressRef.validate(async (bo) => {
					if (bo) {
						this.addDialogVisible = false;
						var param = new URLSearchParams();
						param.append("phone", this.addAddress.phone);
						param.append("detaties", this.addAddress.detaties);

						var ss = this.addAddress.addname;
						let permission = ss.join("");

						param.append("addname", permission);
						//console.log(this.addAddress.addname)
						let userid = window.sessionStorage.getItem("userid");
						param.append("userid", userid);
						var res = await this.$http.post("addAddress", param);
						if (res.data.code == 200) {
							//成功
							this.$message.success(res.data.message);
							//更新页面
							this.reset();
							this.seleaddress();
						} else {
							//失败
							this.$message.error(res.data.message);
						}
					} else {
						this.$message.error("数据不合法，请检查！");
					}
				});
			},

			async paymomey() {
				var param = new URLSearchParams();
				let userid = window.sessionStorage.getItem("userid");

				param.append("userid", userid);
				param.append("iid", this.ri.it.iid);
				param.append("allmoney", this.sum);
				param.append("payonemoney", this.ri.rw.paymoney);
				param.append("paynum", this.paynum);
				param.append("rewardnum", this.ri.rw.rewardnum);
				param.append("aid", this.aaadid);
				var res = await this.$http.post("insertSO", param);

				this.$confirm("是否确定付款", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(async () => {
						if (this.checked == true) {

							this.xx = res.data.data;
							// console.log(this.xx)
							if (res.data.code == 200) {
								var params = new URLSearchParams();
								params.append("orderid", this.xx.orderid)
								params.append("orderuuid", this.xx.orderuuid)
								params.append("userid", this.xx.userid)
								params.append("allmoney", this.xx.allmoney)
								params.append("payonemoney", this.xx.payonemoney)
								params.append("paynum", this.xx.paynum)
								params.append("rewardnum", this.xx.rewardnum)
								params.append("aid", this.xx.aid)
								params.append("paytime", this.xx.paytime)
								params.append("isdel", this.xx.isdel)
								params.append("status", this.xx.status)
								params.append("iid", this.xx.iid)
								//成功
								var resx = await this.$http.post(
									"/alipay",
									params
								);
								if (resx.data.code == 202) {
									this.payGateWay = resx.data.data;
									const div = document.getElementById("xxx1");
									div.innerHTML = this.payGateWay; //此处form就是后台返回接收到的数据
									// document.getElementsById("xxx1").appendChild(div);
									document.forms[0].submit();
									// console.log(this.payGateWay);
								}
							} else {
								//失败
								this.$message.error(res.data.message);
							}
						} else {
							this.$message.error("请确定是否了解风险");
						}
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消订单",
							
						});
						this.$router.push('/mycf');
					});
			},
			next() {
				this.active = 1;
				let aa = JSON.stringify(this.ri);
				this.$router.push({
					path: "/pay_step_2",
					query: {
						ra: aa,
					},
				});
			},
		},
		mounted() {
			this.seleaddress();
		},
	};
</script>

<style scoped>
	.th2 {
		border: 1px solid black;
	}

	.table2 {
		border-collapse: collapse;
		width: 100%;
	}

	.td2 {
		height: 50px;
		vertical-align: bottom;
	}
</style>
